<script lang="ts" setup>
import { isString } from 'lodash-es'
import * as controls from '@/components/controls'
import type { SettingProps } from '@/components'

defineOptions({
  name: 'SettingItem',
})

withDefaults(defineProps<SettingProps>(), {
  settings: () => [],
})
</script>

<template>
  <div v-for="u in settings" :key="u?.name">
    <template v-if="u?.items?.length">
      <div class="w-full">
        <el-text class="mb-3 inline-block h-[32px] w-full pl-1 text-white font-500 leading-[32px]" :class="$style['gradation-bg']">
          {{ u?.title }}
        </el-text>
        <div class="ms-2">
          <SettingItem :settings="u?.items" />
        </div>
      </div>
    </template>
    <template v-else>
      <div class="mb-3 ms-2 flex items-start justify-between">
        <el-text :for="u?.name" class="inline-block h-[32px] w-[80px] font-500 leading-[32px]">
          {{ u?.title }}
        </el-text>
        <div class="w-0 flex-auto">
          <component
            :is="isString(u?.control) ? controls[u?.control] : u?.control" v-if="u?.control" :id="u?.name"
            class="w-full" v-bind="u?.props"
          />
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="scss" module>
.gradation-bg {
  background: linear-gradient(90deg,rgba(var(--el-color-primary-rgb,.06)) 0,rgba(237,254,171,.036) 100%);
}
</style>
